import { seed } from './seed';
import { reactive } from 'vue';

export const store = {
  state: {
    data: reactive(seed),
  },
  getActiveDay() {
    return this.state.data.find((day) => day.active);
  },
  setActiveDay(dayId) {
    this.state.data.map((day) => {
      day.id == dayId ? (day.active = true) : (day.active = false);
    });
  },
  submitEvent(eventDetails) {
    const activeDay = this.getActiveDay();
    activeDay.events.push({
      details: eventDetails,
      edit: false,
    });
  },
  editEvent(dayId, eventDetails) {
    this.resetEditOfAllEvents();
    const dayObj = this.state.data.find((day) => day.id === dayId);
    const eventObj = dayObj.events.find(
      (event) => event.details === eventDetails
    );
    eventObj.edit = true;
  },
  resetEditOfAllEvents() {
    this.state.data.map((dayObj) => {
      dayObj.events.map((e) => (e.edit = false));
    });
  },
  updateEvent(dayId, details, newDetails) {
    const dayObj = this.state.data.find((day) => day.id === dayId);
    const eventObj = dayObj.events.find((event) => event.details === details);
    eventObj.details = newDetails;
    eventObj.edit = false;
  },
  deleteEvent(dayId, details) {
    const dayObj = this.state.data.find((day) => day.id === dayId);
    const index = dayObj.events.findIndex((e) => e.details === details);
    dayObj.events.splice(index, 1);
  },
};
